<template>
    <div>
      <h2 style="margin-left:50% ">vue基础</h2>
      <div style="font-weight: bold">动态绑定class(对象式)</div>
      <p :class="{active:isActive,size:isSize}" class="yuan">{{message}}</p>
      <!-- getClass()括号不能丢 -->
      <p :class="getClass" class="yuan">{{message}}</p>
      <el-button @click="btnClick" disabled>改变</el-button>
      <hr>

      <div style="font-weight: bold">动态绑定class(数组式)</div>

      <p :class="[active,size]" class="yuan">{{message}}</p>
      <p :class="getClass" class="yuan">{{message}}</p>
      <p :class="['aaa','bbb']" class="yuan">{{message}}</p>

      <el-button @click="btnClick" type="plain">改变</el-button>
      <br>
      <br>
      <div style="font-weight: bold">动态绑定style(数组式)</div>

      <div :style="{fontSize:50+'px',color:'pink'}"> {{message}}</div>
      <div :style="{fontSize:fsize}"> {{message}}</div>
      <div :style="{fontSize:fsize,color:finalColor}"> {{message}}</div>
      <div :style="getStyle"> {{message}}</div>

      <div style="font-weight: bold">动态绑定style(数组式)</div>
      <p :style="[baseStyle,lastStyle]">{{message}}</p>
      <p :style ="[baseStyle,lastStyle]">{{message}}</p>
      <hr>
      <div style="height:88px;background-color: lightblue"></div>
      <br>
      <br>
      <h3>v-for的几种遍历情况---找注释</h3>
       <!--
           <div v-for="(item,index) in items"  :key="item.id" :class="['class1',`jay${index+1}`]">
            {{ item }}
       </div> -->

      <hr>
      <el-button @click="ComponentsChange" type="info" >切换组件页面</el-button>

      <transition name="component-fade" mode="out-in">
        <component :is="currentView"></component>
      </transition>



      <hr>
      <h3 style="color: red;">JavaScript的几个高阶函数的使用</h3>
      <el-button @click="filterApply" type="danger">filter</el-button>
      <el-button @click="mapApply" type="danger">map</el-button>
      <el-button @click="reduceApply" type="danger">reduce</el-button>
      <h2>watch监听属性的使用</h2>
      <el-input v-model="watchData"></el-input>
      <el-input v-model="cityName.name"></el-input>
      <div>{{statusTrans(Math.random())}}</div>
      <div>{{statusTrans(Math.random())}}</div>
      <div>{{test}} </div>
      <div>{{test}} </div>
    </div>

</template>

<script>
  import Example1 from "@/views/vue/component/vueEle/Example1";
  import Example2 from "@/views/vue/component/vueEle/Example2";
  import Gamble from "@/views/vue/component/vueEle/Gamble";
  import Von from "@/views/vue/component/vueEle/Von";

    export default {
        name: "VueEle",
        components:{
            Example1,
            Example2,
            Gamble,
            Von
        },
        data(){
            return{
              message:"你好",
              active:"active",
              size:"size",
              //通过修改boolean就会改变类的有无,多个类是可以写到数组里面的
              isActive:true,
              isSize:true,
              fsize:30+'px',
              finalColor:"yellow",
              finalColor2:"green",
              baseStyle:{
                backgroundColor:"red",
                textDecoration:"underline",
              },
              lastStyle:{
                fontSize:30+'px',
                textAlign:"center"
              },
              //组件的动态渲染
              myComponentsArr:[Example1,Example2,Von,Gamble],
              componentsIndex:0,
              watchData:'我是被watch的数据',
              cityName:{
                name:'北京'
              },

            }
        },
      computed:{
          /*计算属性传参*/
         statusTrans: () => {
           return (status) => {
             // console.log(this.defectStateList)
             return status+1
           };
        },
        // test 使用多次 值是相同的
        test(){
          return Math.random()
        },
        getClass(){
          return  {active:this.isActive,size:this.isSize}
        },
        getStyle(){
          return {fontSize:this.fsize,color:this.finalColor2}
        },
        //动态组件
        currentView(){
          return this.myComponentsArr[this.componentsIndex];
        }
      },
        methods:{

          btnClick(){
            //通过按钮控制class的有无(变化)
            this.isActive=!this.isActive;
            this.isSize=!this.isSize;
          },

          ComponentsChange(){
            this.componentsIndex++
            if (this.componentsIndex>3){
              this.componentsIndex=0
            }

            // this.componentsIndex = (++this.componentsIndex)%2;
          },
          //高阶函数的一般使用   高阶函数是可以连起来使用的
          filterApply(){
            let arr1 = [1,2,3,10,5,6].filter((value,index)=>{
                  return value>4
            })
            console.log(arr1)
          },
          mapApply(){
            let arr2 = [1,2,3,10,5,6].map((value,index)=>{
                return value*2
            })
            console.log(arr2)
          },
          reduceApply(){
            // ③对象里的属性求和
           let result = [
              {
                subject: 'math',
                score: 10
              },
              {
                subject: 'chinese',
                score: 20
              },
              {
                subject: 'english',
                score: 30
              }
            ];

            var sum2 = result.reduce(function(prev, cur) {
              return cur.score + prev;
            }, 0);
            console.log(sum2) //60
           },
            watchApply(){
              this.watch='watch变化了'
              console.log(this.watch)
            }
    },
      watch:{
      /*  watchData(newData,oldData){
            console.log(newData)
            console.log(oldData)
        },*/
        //监听基础属性
        watchData: {
          handler(newData, oldData) {
            console.log(newData)
            console.log(oldData)
          },
          // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
          immediate: true
        },
        //监听对象的属性变化
        'cityName.name': {
          handler(newName, oldName) {
           console.log(newName,oldName)
          },
          deep: true,
          immediate: true
        },
        //监听对象的所有属性变化
         'cityName': {
          handler(newName, oldName) {
           console.log(newName,oldName)
          },
          deep: true,
          immediate: true
        }
      }
    }
</script>

<style scoped>
  .active{
    color: red;
  }
  .size{
    font-size:35px;
  }
  .yuan{
    background: greenyellow;
  }

  .component-fade-enter-active, .component-fade-leave-active {
    transition: opacity .5s ease;
  }
  .component-fade-enter, .component-fade-leave-to
    /* .component-fade-leave-active for below version 2.1.8 */ {
    opacity: 0;
  }
</style>
<!--
遍历的方式总结:
        for()
        for in 注意i变量是index
        for of
        for each
        filter
        map
        reduce

-->

<!--
    vue 键盘事件  按什么键触发什么事件
    按键抬起
    @keyup.13     按回车键
    @keyup.enter 回车
    @keyup.up    上键
    @keyup.down  下键
    @keyup.left     左键
    @keyup.right    右键
    @keyup.delete    删除键

    @click.stop   阻止冒泡
    @click.prevent  阻止表单默认提交
    @click.once  一次点击事件
-->

<!--
        v-for 遍历普通数组数据  <li v-for="(mv,index) in movies">第一个参数是值,第二个是下标</li>
        v-for 遍历对象数组数据  <li v-for="(mv,index) in movies">第一个参数是对象,第二个是下标</li>
        v-for 可以遍历数字  <li v-for="num in 10">参数是第几次遍历的数字</li>
        v-for 遍历对象数据 <li v-for="(value,key,index) in myself" :key="index">属性值,属性名,属性下标</li>

        删除元素：第二个参数传入你要删除几个元素(不传，删除该位置后所有元素)
        替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素(可理解为前面删除，后面追加)
        插入元素：第二个参数，传入0(不删)，并且后面跟上要插入的元素
          this.letters.splice(1,2)
          this.letters.splice(1,2,"A","B","C")
          this.letters.splice(1,0,"A","B","C")


      JS数组reduce()方法(一般用来合计汇总)
          arr.reduce(function(prev,cur,index,arr){
          ...
          }, init);
          或者
          arr.reduce(function(prev,cur,index,arr){
          ...
          },);

          arr 表示将要原数组；
          prev 表示上一次调用回调时的返回值☆☆，或者初始值 init;
          cur 表示当前正在处理的数组元素；
          index 表示当前正在处理的数组元素的索引，有init 值，则索引为0，否则索引为1；
          init 表示初始值。
      常用的参数只有两个：prev 和 cur。
-->
<!--
    v-model.trim  去除空格
    v-model.number 只能输入数字
-->
